import React from "react";
import { SearchPanel } from "./searcch-panel";
import { List } from "./list";
import { useState } from "react";
// import qs from "qs";
import { useDebounce } from "../../../../utils";
// import { useHttp } from "../../../../service/http";
import styled from "@emotion/styled";
import { Typography } from "antd";
// import {useAsync} from "../../../../service/use-async";
import { useProject } from "../../../../service/use-project";
import { useUser } from "../../../../service/use-user";

export const ProjectListScreen = () => {
  // const [users, setUsers] = useState([]);
  const [param, setParam] = useState({
    name: "",
    personId: "",
  });
  // const [list, setList] = useState([]);
  // const [isLoading, setIsLoading] = useState(false); // 添加loading效果
  // const [error, setError] = useState<null | Error>(null);
  const debounceParams = useDebounce(param, 2000);
  // const {run, isLoading, error, data: list} = useAsync<Project[]>()
  const { isLoading, error, data: list } = useProject(debounceParams);
  // const client = useHttp();

  // useEffect(() => {
  //   run(client("projects", { data: cleanObject(debounceParams) }))
  //   // setIsLoading(true);
  //   // client("projects", { data: cleanObject(debounceParams) })
  //   //   .then(setList)
  //   //   .catch((error) => {
  //   //     setList([]);
  //   //     setError(error);
  //   //   })
  //   //   .finally(() => setIsLoading(false));
  // }, [debounceParams]); // eslint-disable-line react-hooks/exhaustive-deps

  // 初始化users数据
  // useMount(() => {
  //   client("users").then(setUsers);
  // });
  const { data: users } = useUser();

  return (
    <Container>
      <h2>项目列表</h2>
      <SearchPanel users={users || []} param={param} setParam={setParam} />
      {error ? (
        <Typography.Text type={"danger"}>{error.message}</Typography.Text>
      ) : null}
      {/*<List users={users} list={list} loading={isLoading}/>*/}
      <List users={users || []} dataSource={list || []} loading={isLoading} />
    </Container>
  );
};

const Container = styled.div`
  padding: 3.2rem;
`;
